<template>
  <view class="flex flex-col h-full bg-[#f4f4f4]">
    <image
      class="absolute top-0 left-0 w-full h-[500rpx] z-0 opacity-80 blur-[2px]"
      src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png"
      mode="aspectFill"
    />
    <!-- 添加渐变遮罩 -->
    <view class="absolute top-0 left-0 w-full h-[500rpx] bg-gradient-to-b from-black/20 to-transparent z-1" />
    <!-- 头像 -->
    <view class="text-center w-full h-[260rpx] flex flex-col justify-center items-center relative z-10">
      <view class="w-[160rpx] h-[160rpx] rounded-full bg-[#eee] overflow-hidden">
        <image
          class="w-full h-full"
          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
          mode="aspectFill"
        />
      </view>
    </view>
    <!-- 表单 -->
    <view class="bg-[#f4f4f4] relative z-10">
      <!-- 表单内容 -->
      <view class="mx-[20rpx] mt-[20rpx] px-[20rpx] rounded-[10rpx] bg-white">
        <view class="flex h-[96rpx] leading-[46rpx] py-[25rpx] px-[10rpx] bg-white text-[28rpx] border-b border-[#ddd]">
          <text class="w-[180rpx] text-[#333]">昵称</text>
          <input class="flex-1 block h-[46rpx]" type="text" placeholder="请填写昵称" v-model="profile.name" />
        </view>
        <view class="flex h-[96rpx] leading-[46rpx] py-[25rpx] px-[10rpx] bg-white text-[28rpx] border-b border-[#ddd]">
          <text class="w-[180rpx] text-[#333]">电子邮箱</text>
          <input class="flex-1 block h-[46rpx]" type="text" placeholder="请填写电子邮箱" v-model="profile.email" />
        </view>
        <view class="flex h-[96rpx] leading-[46rpx] py-[25rpx] px-[10rpx] bg-white text-[28rpx] border-b border-[#ddd]">
          <text class="w-[180rpx] text-[#333]">电话号码</text>
          <input class="flex-1 block h-[46rpx]" type="text" placeholder="请填写电话号码" v-model="profile.phone" />
        </view>

        <!-- 只有微信小程序端内置了省市区数据 -->
        <!-- #ifdef MP-WEIXIN -->
        <view class="flex h-[96rpx] leading-[46rpx] py-[25rpx] px-[10rpx] bg-white text-[28rpx]">
          <text class="w-[180rpx] text-[#333]">城市</text>
          <picker
            @change="onFullLocationChange"
            mode="region"
            class="flex-1"
            :value="profile.address ? profile.address.split(' ') : []"
          >
            <view v-if="profile.address" class="text-[#333]">{{ profile.address }}</view>
            <view class="text-[#808080]" v-else>请选择城市</view>
          </picker>
        </view>
        <!-- #endif -->
      </view>
      <!-- 提交按钮 -->
      <button
        @tap="onSubmit"
        class="h-[80rpx] text-center leading-[80rpx] my-[30rpx] mx-[20rpx] text-white rounded-[80rpx] text-[30rpx] bg-[#27ba9b]"
      >
        保 存
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useUserStore } from "@/store/modules/user";
import { updateCustomerInfo } from "@/api/customer";
interface Profile {
  id: number;
  name: string;
  email: string;
  phone: string;
  address: string;
}
const userStore = useUserStore();
const profile = ref<Profile>({
  id: 0,
  name: "",
  email: "",
  phone: "",
  address: "",
});

// 初始化数据
onMounted(() => {
  if (userStore.information) {
    profile.value.id = userStore.information.id;
    profile.value.name = userStore.information.username;
    profile.value.email = userStore.information.email;
    profile.value.phone = userStore.information.phone;
    profile.value.address = userStore.information.address;
  }
  console.log(userStore.information);
  console.log(profile.value);
});

//修改城市;
let fullLocationCode = ["", "", ""];
const onFullLocationChange = (ev: any) => {
  // 修改前端界面
  profile.value.address = ev.detail.value.join(" ");
  // 提交后端更新
  fullLocationCode = ev.detail.code || ["", "", ""];
};

// 点击保存提交表单
const onSubmit = async () => {
  console.log("提交");
  await updateCustomerInfo(profile.value);
  uni.showToast({ icon: "success", title: "保存成功" });
};
</script>

<style lang="scss" scoped></style>
